<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <!--element-ui css-->
        <link rel="stylesheet" th:href="@{/lib/css/index.css}"/>
        <link rel="shortcut icon" th:href="@{/this/imges/redfuChinese.png}" />
        <title>欢迎访问!</title>
    </head>
    <body class="body">
        <div id="app">
            <router-view style="height: 100vh; width: 100vw;"></router-view>
        </div>
        <!--子组件必须在父组件之前引入-->
        <template th:replace="system/permission/modal/GrantPermissionModal::grantPermissionModal"></template>
        <template th:replace="system/permission/modal/UpdatedPermissionModal::updatedPermissionModal"></template>
        <template th:replace="system/permission/modal/AddPermissionModal::addPermissionModal"></template>
        <template th:replace="system/permission/PermissionIndex::permissionIndex"></template>

        <template th:replace="system/user/modal/UpdatedUserModal::updatedUserModal"></template>
        <template th:replace="system/user/modal/AddUserModal::addUserModal"></template>
        <template th:replace="system/user/UserHead::userHead"></template>
        <template th:replace="system/user/UserIndex::userIndex"></template>

        <template th:replace="system/role/modal/RelationRoleModal::relationRoleModal"></template>
        <template th:replace="system/role/modal/AddRoleModal::addRoleModal"></template>
        <template th:replace="system/role/modal/UpdatedRoleModal::updatedRoleModal"></template>
        <template th:replace="system/role/RoleIndex::roleIndex"></template>

        <template th:replace="system/login/LoginIndex::loginIndex"></template>

        <template th:replace="base/TheHome::home"></template>
        <!--引入库-->
        <!--首先加载vue,而后加载elementUI，顺序不能改-->
        <script th:src="@{/lib/js/vue.js}" type="text/javascript" charset="utf-8"></script>
        <script th:src="@{/lib/js/index.js}" type="text/javascript" charset="utf-8"></script>
        <script th:src="@{/lib/js/vue-router.js}" type="text/javascript" charset="utf-8"></script>
        <script th:src="@{/lib/js/axios.min.js}" type="text/javascript" charset="utf-8"></script>
        <script th:src="@{/lib/js/qs.min.js}" type="text/javascript" charset="utf-8"></script>

        <!--引入自定义js，因为自定义js是在框架的基础上运行，只有框架加载之后方能运行，故放框架之后-->
        <!--路由应在vue对象被创建之前引入-->
        <script th:src="@{/this/js/base/router.js}"></script>
        <script th:src="@{/this/js/base/main.js}"></script>
    </body>
</html>